<template>
  <!-- API管理 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="API管理" width="50%" :before-close="handleClose" top="100px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="ruleForm" :model="formParams" :rules="ruleForm" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
          </div>
          <div class="content width80">
            <el-form-item class="item-clear" v-show="item.key=='path'" label="" prop="path">
              <el-select class="width100" v-model="formParams.path" placeholder="选择请求路径" filterable clearable @change="chooseItem">
                <el-option :label="second.path" :value="second.path" v-for="(second, two) in apiDataList" :key="two"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='method'" label="" prop="method">
              <el-select v-model="formParams.method" placeholder="选择请求方式" disabled>
                <el-option label="GET" value="GET"></el-option>
                <el-option label="POST" value="POST"></el-option>
                <el-option label="PUT" value="PUT"></el-option>
                <el-option label="DELETE" value="DELETE"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='apiGroup'" label="" prop="apiGroup">
              <el-input class="width40" v-model="formParams.apiGroup" placeholder="api所属管理页面 例:用户管理"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='description'" label="" prop="description">
              <el-input class="width40" v-model="formParams.description" placeholder="api描述 例:用户信息"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='identifier'" label="" prop="identifier">
              <el-input class="width40" v-model="formParams.identifier" placeholder="api标识 例:add"/>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  apiAdd,
  apiEdit,
  interfaceList
} from '@/api/system.js'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data () {
    return {
      isShow: false,
      itemData:[
        { label: '请求路径', key: 'path',pass:true },
        { label: '请求方法', key: 'method',pass:true },
        { label: 'api所属类别', key: 'apiGroup',pass:true },
        { label: 'api描述', key: 'description',pass:true },
        { label: 'api标识', key: 'identifier',pass:true },
      ],
      formParams: {
        path: '',
        method: '',
        apiGroup: '',
        description: '',
        identifier: '',
      },
      apiDataList: [],
      ruleForm: {
        path: [{ required: true, trigger: 'blur', message: '请选择请求路径', }],
        method: [{ required: true, trigger: 'blur', message: '选择请求方式', }],
        apiGroup: [{ required: true, trigger: 'blur', message: '请输入api所属类别', }],
        description: [{ required: true, trigger: 'blur', message: '请输入api描述', }],
        identifier: [{ required: true, trigger: 'blur', message: '请输入api标识', }],
      }
    }
  },
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
      } else {
        that.formParams = {
          path: '',
          method: '',
          apiGroup: '',
          description: '',
          identifier: '',
        }
      }
    },
  },
  mounted () {
    this.getApiList()
  },
  methods: {
    // 获取所有的api接口
    getApiList () {
      let that = this;
      that.apiDataList = [];
      that.checkedItem = null;
      interfaceList({}).then(function (res) {
        that.apiDataList = res.data
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 选择api
    chooseItem (path) {
      this.apiDataList.map(item => {
        if (item.path == path) {
          this.formParams.method = item.method
        }
      })
    },
    // 确认
    handleConfirm (formName) {
      let that = this, params = JSON.parse(JSON.stringify(that.formParams));
      that.$refs[formName].validate((valid) => {
        if (valid) {
          // 新增
          if (!params.id) {
            apiAdd(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
              that.getApiList()
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            apiEdit(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
              that.getApiList()
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
</style>
